h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
ul{
  list-style: none;
}
.selected{
  background-color:#CFD8DC !important;
  color:white;
}
.heroes{
  margin: 0 0 2em 0;
  padding: 0;
  width: 15em;
}
.heroes li{
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #eeeeee;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes li.selected:hover{
  background-color: #bbd8dc !important;
}
.heroes li:hover{
  color: red;
  background: #dddddd;
  left: .1em;
}
.heroes li input{
  border:none;
}
.heroes .text{
  position: relative;
  top:-3px;
}
.heroes .badge{
  display: inline-block;
  font-size: small;
  color: #fff4c2;
  padding:0.8em 0.7em 0 0.7em;
  background: #607d8d;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: 0.8em;
  border-radius: 4px 0 0 4px;
}



